---
title: React File Input - Flowbite
description: Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes
---

The `<FileInput>` component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, and variants and built with the utility-first classes from Tailwind CSS including support for dark mode.

Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the `<FileInput>` component.

To start using the component make sure that you have imported it from Flowbite React:

```jsx
import { FileInput } from "flowbite-react";
```

## File upload example

Get started with a simple `<FileInput>` component to let users upload one single file.

<Example name="fileInput.root" />

## Helper text

Add a descriptive helper text to inform users the allowed extensions and sizes of the files.

<Example name="fileInput.helper" />

## Multiple files

Apply the multiple attribute to the `<FileInput>` component to allow more files to be uploaded.

<Example name="fileInput.multiple" />

## Sizes

Choose from the small, default, and large `<FileInput>` sizing options.

<Example name="fileInput.sizes" />

## Dropzone

The dropzone `<FileInput>` component can be used to upload one or more files by clicking anywhere in the area.

<Example name="fileInput.dropzone" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="fileInput" />

## References

- [Flowbite File Input](https://flowbite.com/docs/forms/file-input/)
